<template>
  <div class="app-container">
    <basic-container>
      <avue-crud ref="crud"
                 v-model="hotelForm"
                 :page="hotelPage"
                 :data="tableData"
                 :option="tableOption"
                 :table-loading="hotelLoading"
                 @on-load="getList"
                 @refresh-change="refreshChange"
                 @row-update="rowUpdate"
                 @row-save="rowSave"
                 @row-del="rowDel">
        <template slot="zhanshitpid"
                  slot-scope="scope">
          <el-button @click="showImgPath(scope.row)">查看</el-button>
        </template>
        <template slot-scope="scope"
                  slot="menuLeft">
          <router-link :to="{path:`/hotelManage/add`}">
            <el-button icon="el-icon-plus"
                       size="small"
                       type="primary">新增</el-button>
          </router-link>
        </template>
        <template slot-scope="scope"
                  slot="menu">
          <el-button @click="rowEdit(scope.row)"
                     icon="el-icon-edit"
                     size="small"
                     type="primary">编辑</el-button>
          <el-button @click="rowDel(scope.row)"
                     icon="el-icon-delete"
                     size="small"
                     type="danger">删除</el-button>

          <el-button @click="operate(scope.row,scope.index)"
                     size="small"
                     type="primary">{{Number(scope.row.flag)===1?'营业':'暂停营业'}}</el-button>
        </template>
        <template slot-scope="scope"
                  slot="flag">
          <el-tag v-if="Number(scope.row.flag)===0"
                  type="success">{{scope.label}}</el-tag>
          <el-tag v-else-if="Number(scope.row.flag)===1"
                  type="warning">{{scope.label}}</el-tag>
        </template>
      </avue-crud>
      <el-dialog title="图片"
                 width="100%"
                 fullscreen
                 :visible.sync="imgFormVisible">
        <span v-if="url===''">暂无图片</span>
        <avue-carousel v-else
                       :option="imgOption"></avue-carousel>
      </el-dialog>
    </basic-container>
  </div>
</template>

<script>
import { isPhone } from "@/util/validate";
import {
  fetchList,
  addObj,
  putObj,
  delObj,
  getImg
} from "@/api/hotelManage/hotelManage";
export default {
  name: "crud",
  data() {
    var validatePass = (rule, value, callback) => {
      if (!isPhone(value)) {
        callback(new Error("请输入正确号码"));
      } else {
        callback();
      }
    };
    return {
      url: [],
      imgFormVisible: false,
      hotelForm: {},
      hotelLoading: false,
      hotelPage: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        orderBy: `order by id asc`
      },
      tableOption: {
        index: true,
        border: true,
        stripe: true,
        addBtn: false,
        editBtn: false,
        delBtn: false,
        selection: true,
        maxHeight: 400,
        menuWidth: 280,
        menu: true,
        indexLabel: "序号",
        align: "center",
        column: [
          {
            label: "酒店名称",
            size: "small",
            prop: "jdmc"
          },
          {
            label: "酒店地址",
            size: "small",
            prop: "jddz",
            width: 150,
            overHidden: true
          },
          {
            label: "星级",
            size: "small",
            type: "select",
            prop: "xingji",
            dicData: [
              {
                label: "一星级",
                value: "1"
              },
              {
                label: "二星级",
                value: "2"
              },
              {
                label: "三星级",
                value: "3"
              },
              {
                label: "四星级",
                value: "4"
              },
              {
                label: "五星级",
                value: "5"
              }
            ]
          },
          {
            label: "展示图片",
            size: "small",
            prop: "zhanshitpid",
            align: "center",
            solt: true,
            span: 24,
            formsolt: true,
            disabled: true
          },
          {
            label: "电话",
            size: "small",
            prop: "dianhua",
            rules: [
              { required: true, message: "请输入电话", trigger: "blur" },
              { validator: validatePass, trigger: "blur" }
            ]
          },
          {
            label: "状态",
            size: "small",
            type: "select",
            prop: "flag",
            solt: true,
            dicData: [
              {
                label: "营业中",
                value: "0"
              },
              {
                label: "暂停营业",
                value: "1"
              }
            ]
          }
        ]
      },
      tableData: []
    };
  },
  created() {},
  mounted: function() {},
  computed: {
    imgOption() {
      let option = {
        height: 500,
        type: "card",
        data: []
      };
      // option.data.push({
      //   src: this.url
      // });
      for (var i = 0, len = this.url.length; i < len; i++) {
        option.data.push({
          src: this.url[i]
        });
      }
      return option;
    }
  },
  methods: {
    getList(page) {
      this.hotelLoading = true;
      fetchList({
        start: (page.currentPage - 1) * page.pageSize,
        length: page.pageSize,
        orderBy: this.hotelPage.orderBy
      }).then(res => {
        this.hotelLoading = false;
        this.hotelPage.total = res.data.recordsTotal;
        this.tableData = res.data.data;
      });
    },
    showImgPath(row) {
      getImg({
        id: "",
        zhanshitpid: row.zhanshitpid
      }).then(res => {
        res.data.data[0].url.split(",").forEach(ele => {
          this.url.push(ele);
        });
        // this.url = res.dasta.data[0].url || "";
      });
      this.imgFormVisible = true;
    },
    operate(row, index) {
      row.flag = (Number(row.flag) === 1 ? 0 : 1) + "";
      putObj(row).then(() => {
        this.$message({
          showClose: true,
          message: "修改成功",
          type: "success"
        });
        this.tableData.splice(index, 1, row);
      });
    },
    refreshChange() {
      this.getList(this.hotelPage);
      this.$message({
        showClose: true,
        message: "刷新成功",
        type: "success"
      });
    },
    rowDel(row) {
      this.$confirm("是否确认删除", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return delObj(row.id);
        })
        .then(() => {
          this.$message({
            showClose: true,
            message: "删除成功",
            type: "success"
          });
          this.getList(this.hotelPage);
        })
        .catch(function() {});
    },
    rowUpdate(row, index, done) {
      putObj(row).then(() => {
        this.$message({
          showClose: true,
          message: "修改成功",
          type: "success"
        });
        this.getList(this.hotelPage);
        done();
      });
    },
    rowSave(row, done) {
      addObj(Object.assign({}, row)).then(() => {
        this.$message({
          showClose: true,
          message: "添加成功",
          type: "success"
        });
        this.getList(this.hotelPage);
        done();
      });
    },
    rowEdit(row) {
      this.$router.push({
        path: `/hotelManage/edit/${row.id}`,
        query: {
          szdqsheng: row.szdqsheng,
          szdqshi: row.szdqshi
        }
      });
    }
  }
};
</script>

